/**
 * 保险主界面
 */
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux/native';
import { Log, h, CusComponents } from 'yzt-react-base';
import { AppConst, AdvertRequest, YZTBaseComponent }  from '../../YZTFlagshipBase/index';
import Actions from '../actions/actions.js';
import { InsuranceAdvert, InsuranceActivity } from './InsuranceAdvertAndActivity';
import { InsuranceShopAdviserEntrance } from './InsuranceShopAdviserEntrance';
import { InsuranceSectionItems, InsuranceMultipleSectionItems } from './InsuranceSectionItems';
import  InsuranceRequest from '../network/InsuranceRequest';

const { YztScrollView } = CusComponents;

let insuranceRequest = new InsuranceRequest();

class Main extends YZTBaseComponent {
    static propTypes = {
        ads: PropTypes.array,
        shop : PropTypes.object,
        adviser : PropTypes.object,
        activities : PropTypes.array,
        status: PropTypes.string,
        hot: PropTypes.object,
        others: PropTypes.array,
        getDataList: PropTypes.func,
        getAds: PropTypes.func
    };

    // 构造
    constructor(props) {
        super(props);
        this.title = AppConst.APP_FLAGSHIP_INSURANCE_MODULE_NAME;
        this._loadData = this._loadData.bind(this);
    }

    _loadData(){
        const actions = this.props.actions;
        insuranceRequest.loadInsuranceMainModuleData(actions);
        this.updateLastRefreshTime();
    }

    render() {
         if (this.props.others.length || this.props.hot.length || this.props.shop.data && this.props.adviser.data )
         {
            const ads = this.props.ads[0];
            return (
                <YztScrollView style={style.container} onRelease={(e)=>{this._loadData(e);}} ref={(component) => this.refresher = component} >
                    <InsuranceAdvert adverts={ads}/>
                    <InsuranceShopAdviserEntrance shop={this.props.shop} adviser={this.props.adviser}/>
                    <InsuranceSectionItems sectionHead={this.props.hot.sectionHead} products={this.props.hot.products}/>
                    <InsuranceActivity acts={this.props.activities}/>
                    <InsuranceMultipleSectionItems listData={this.props.others}/>
                </YztScrollView>);
         } else if (this.props.others.length === 0 && !this.props.hot.sectionHead && this.props.status === AppConst.REQUEST_ERROR_STATUS){
             return this._renderFailView();
         } else {
            return <YztScrollView style={style.container} onRelease={(e)=>{this._loadData(e);}} ref={(component) => this.refresher = component}/>;
         }
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5'
    }
});

export default connect((state) => {
    return {
        shop: state.main.shop,
        adviser: state.main.adviser,
        activities: state.main.activities,
        status:state.main.status,
        hot: state.main.hot,
        others: state.main.others,
        ads: state.ads.data
    };
}, dispatch => ({
    actions: bindActionCreators(Actions, dispatch),
}))(Main);
